<template>
  <!-- edit 0 头像 1 昵称 2 手机号码 3 地区 4 详细地址 -->
  <div class="edit-view youke">
    <van-nav-bar :title="routeTitil" left-arrow fixed @click-left="onBack()">
      <van-button slot="right" size="small" @click="sendFun" type="info" :disabled="getdisable">保存</van-button>
    </van-nav-bar>
    <Main>
      <template slot="main">
        <div class="inputs-group edit-inputs">
          <template v-if="$route.query.edit==0">
            <div class="head-upload" v-show="uploadImg==''">
              <van-uploader :after-read="onRead" ref="headupload" class="upload-head">
                <van-icon name="plus"/>
              </van-uploader>
              <div class="pay-upload-text">请上传头像</div>
            </div>
            <div class="head-show-img" v-show="uploadImg!=''">
              <img :src="uploadImg" alt @click="changesfun">
            </div>
          </template>
          <template v-else-if="$route.query.edit==1">
            <van-field v-model="usernames" type="textarea" placeholder="请输入昵称"/>
          </template>
          <template v-else-if="$route.query.edit==2">
            <van-field v-model="phone" type="textarea" placeholder="请输入联系手机号"/>
          </template>
          <template v-else-if="$route.query.edit==3">
            <van-field v-model="area" type="textarea" placeholder="地区"/>
            <!-- <van-field v-model="area" right-icon="arrow" readonly @click="show=true"/> -->
          </template>
          <template v-else-if="$route.query.edit==4">
            <van-field v-model="address" type="textarea" placeholder="请输入详细地址"/>
          </template>
          <template v-else>暂无修改</template>
        </div>
      </template>
    </Main>
    <van-popup v-model="show" position="bottom">
      <van-picker
        show-toolbar
        title="地区"
        :columns="columns"
        value-key="value"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="showloading">
      <van-loading size="50px" type="spinner" text-size="24px" vertical color="#1989fa"></van-loading>
      <div class="texts">上传中...</div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { user } from "@/api";
import { check } from "@/ext/check";

export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      usernames: "",
      phone: "",
      address: "",
      area: "",
      uploadImg: "",
      columns: [
        {
          id: 1,
          value: "福建"
        },
        {
          id: 2,
          value: "广东"
        },
        {
          id: 3,
          value: "北京"
        }
      ],
      show: false,
      showloading: false
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {
    routeTitil() {
      let arr = ["头像", "昵称", "联系电话", "地区", "详细地址"];
      if (!this.$route.query || !this.$route.query.edit) {
        return arr[0];
      }
      return arr[this.$route.query.edit];
    },
    getdisable() {
      let f = false;
      let edit = this.$route.query.edit;
      if (!this.uploadImg && edit == 0) {
        f = true;
      }
      if (!this.usernames && edit == 1) {
        f = true;
      }
      if (!this.phone && edit == 2) {
        f = true;
      }
      if (this.area == "请选择" && edit == 3) {
        f = true;
      }
      if (!this.address && edit == 4) {
        f = true;
      }
      return f;
    }
  },
  //模板组件
  components: {},
  //执行方法
  methods: {
    onRead(file, detail) {
      this.uploadImg = file.content;
    },
    changesfun() {
      this.$refs.headupload.$refs.input.click();
    },
    sendFun() {
      // 成功保存到
      let _data = {
        cname: this.usernames,
        image: this.uploadImg,
        add: this.area,
        mobile: this.phone,
        remark: this.address
      };
      let edit = this.$route.query.edit;
      if (!this.uploadImg && edit == 0) {
        this.$toast.fail("头像未上传");
        return;
      }

      if (!this.usernames && edit == 1) {
        this.$toast.fail("昵称不能为空");
        return;
      }
      if (!this.area && edit == 3) {
        this.$toast.fail("地区不能为空");
        return;
      }
      if (!this.address && edit == 4) {
        this.$toast.fail("详细地址不能为空");
        return;
      }
      this.showloading = true;
      user.setinfo(_data).then(res => {
        if (res.code == 1000) {
          this.$toast.success({ duration: 2000, message: "更新成功" });
          this.$store.dispatch("addinfo");
          setTimeout(() => {
            this.$router.push("/user/personal");
            this.showloading = false;
          }, 2000);
        } else {
          this.showloading = false;
        }
      });
    },
    onConfirm(value, index) {
      console.log(value, index);
      this.area = value.value;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    }
  },
  mounted() {}
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.inputs-group {
  &.edit-inputs {
    width: 21.125rem;
    margin: 0.6rem auto 0;
  }

  .tips {
    padding: 1rem 2rem;
    color: #666666;
  }

  .btn-view {
    width: 90%;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    color: #999999;
    background: #fff;
    margin: 0 auto;
    border-radius: 4px;
  }

  .head-upload {
    margin-top: 2rem;

    .upload-head {
      width: 6.25rem;
      height: 6.25rem;
      margin: auto;
      display: block;
      background: #fff;

      .van-icon {
        font-size: 4rem;
        color: #ededed;
        width: 6.25rem;

        &::before {
          display: block;
          text-align: center;
          line-height: 6.25rem;
        }
      }
    }

    .pay-upload-text {
      font-size: 1rem;
      margin-top: 2rem;
      text-align: center;
    }
  }

  .head-show-img {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 100%;
    overflow: hidden;
    margin: auto;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.van-popup {
  background: none;
  .texts {
    color: #fff;
    margin-top: 1rem;
  }
}
</style>
